<!--
 * @Description: APP分享功能
 * @Author: luoguomei
-->
<template>
    <view class="app-share" @click="open">分享</view>
    <up-popup :show="show" @close="close">
        <view class="share-box">
            <view class="share-head">分享至</view>
          <view class="share-body">
            <view class="share-item" @click="onShareGoodImg">
                <view class="share-icon wx"></view>
                <text class="share-text">微信好友</text>
            </view>
            <view class="share-item" @click="onShareImg">
                <view class="share-icon pyq"></view>
                <text class="share-text">朋友圈</text>
            </view>
          </view>
        </view>
    </up-popup>
</template>
<script setup>
import { ref } from "vue"

const props = defineProps({
   isHerf:{//是否使用当前浏览器地址
     type:Boolean,
     default:false
   }, 
  shareUrl: {
    type: String,
  },
  title: {
    type: String,
    default:'标题'
  },
  desc:{
    type: String,
    default:''
  },
  thumbnail: {
    type: String,
    default:'https://minio.gzryzl.com/huatai/2024-04-07/1712478087613rongyao.png'
  },
});

const linkInfo = ref({})
const show = ref(false)
function open() {  
    show.value = true; 
    linkInfo.value =  {
        url:props.isHerf ? location.href : props.shareUrl,
        title:props.title,
        desc:props.desc,
        type:'',
        bitmapB64:props.thumbnail
    }
}  
const onShareGoodImg = ()=>{
	// #ifdef H5
    linkInfo.value.type = 0
	window.mobile.jsCallWxShareWeb(JSON.stringify(linkInfo.value))
    show.value = false; 
	// #endif
}
const onShareImg = ()=>{
	// #ifdef H5
    linkInfo.value.type = 1
	window.mobile.jsCallWxShareWeb(JSON.stringify(linkInfo.value))
    show.value = false; 
    // #endif
}
function close () {
    show.value =false;
}
defineExpose( {
    open,
})
</script>
<style lang="less" scoped>
.app-share{
    font-size: 32rpx;
    color: @color-font;
    position: absolute;
    right: 20rpx;
    top: 30rpx;
    z-index: 999;
}
.share-box{
    border-radius: 33rpx 33rpx 0rpx 0rpx;
    .share-head{
        font-size: 32rpx;
        font-family: 'ali-m';
        font-weight: 500;
        padding: 34rpx 0;
        text-align: center;
        border-bottom: 1px solid @color-line;
    }
    .share-body{
        display: flex;
        justify-content: space-evenly;
        margin: 40rpx 0;
    }
    .share-item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .share-icon{
            width: 84rpx;
            height: 84rpx;
            &.wx{
                background:  @share-wx-icon no-repeat;
                background-size: 100% 100%;
            }
            &.pyq{
                background:  @share-pyq-icon no-repeat;
                background-size: 100% 100%;
            }
        }
        .share-text{
            color: @color-light-grey-text;
            font-size: 23rpx;
            margin-top: 20rpx;
        }
    }
}
</style>
